body {
  background-color: #222;
}

.toy-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vh;
  height: 80vh;
  transform: translate(-50%, -50%);
  perspective: 50vh;
}
.toy-container .lid {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: unset;
  height: 5%;
  background: rgb(140, 20, 20);
  border-radius: 0.5vh;
  border-top-left-radius: 4vh 1vh;
  border-top-right-radius: 4vh 1vh;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 1%, rgba(255, 255, 255, 0.05) 3%, rgba(255, 255, 255, 0.2) 6%, rgba(255, 255, 255, 0.3) 8%, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.3) 13%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.8) 97%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.2), inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 0.2vh 3vh rgba(0, 0, 0, 0.25);
}
.toy-container .lid::before {
  content: "";
  position: absolute;
  top: -2vh;
  left: 4vh;
  width: 10vh;
  height: 2vh;
  background: #ccc;
  border-radius: 1vh 1vh 1vh 0;
  border-top-left-radius: 2vh 1vh;
  box-shadow: inset -1.2vh -0.3vh 1vh rgba(0, 0, 0, 0.6);
}
.toy-container .game {
  position: absolute;
  top: 3%;
  left: 2%;
  right: 2%;
  bottom: 20%;
  transform: rotateX(-5deg);
  transform-origin: 50% 0;
}
.toy-container .game .hills {
  position: absolute;
  top: unset;
  left: 1vh;
  bottom: 6vh;
  right: 1vh;
  overflow: hidden;
  height: 10vh;
}
.toy-container .game .hills::before, .toy-container .game .hills::after {
  position: absolute;
  content: "";
  height: 13vh;
  background: transparent;
}
.toy-container .game .hills::before {
  top: 5vh;
  left: -4vh;
  width: 18vh;
  border-radius: 0.5vh;
  box-shadow: inset 0 1vh 0.2vh rgba(255, 255, 255, 0.3), 1vh -0.5vh 0.2vh rgba(0, 0, 0, 0.2);
  transform: rotate(35deg);
}
.toy-container .game .hills::after {
  top: 7vh;
  left: 18vh;
  width: 26vh;
  border-radius: 1.5vh;
  box-shadow: inset -0.5vh 1vh rgba(255, 255, 255, 0.3), 0.5vh -0.5vh 0.2vh rgba(0, 0, 0, 0.2);
  transform: rotate(-14deg);
}
.toy-container .game .pegs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15vh;
  height: 30vh;
}
.toy-container .game .pegs .peg {
  position: absolute;
  width: 1.5vh;
  height: 10vh;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5vh;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
  border-top-left-radius: 0.75vh 5vh;
  border-top-right-radius: 0.75vh 5vh;
  box-shadow: inset 0.1vh 0 0.1vh rgba(0, 0, 0, 0.3), inset -0.2vh 0 0.2vh rgba(255, 255, 255, 0.2);
}
.toy-container .game .pegs .peg:nth-child(1) {
  left: 20vh;
  bottom: 8vh;
}
.toy-container .game .pegs .peg:nth-child(2) {
  right: 10vh;
  bottom: 15vh;
}
.toy-container .game .pegs .peg::after {
  content: "";
  position: absolute;
  bottom: -2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 4vh;
  height: 4vh;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  box-shadow: inset 0.4vh 0.4vh 0.1vh rgba(255, 255, 255, 0.05), inset -0.3vh -0.3vh 0.2vh rgba(255, 255, 255, 0.1), inset -0.5vh -0.5vh 0.3vh rgba(0, 0, 0, 0.2);
}
.toy-container .game .rings {
  position: absolute;
  inset: 0;
}
.toy-container .game .rings .ring {
  width: 5vh;
  height: 5vh;
  background: radial-gradient(circle 2.5vh at 50% 50%, rgba(0, 0, 0, 0) 50%, red 65%, red 80%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  position: absolute;
  bottom: 4vh;
  left: 15vh;
  -webkit-mask-image: radial-gradient(ellipse 0.8vh 2vh at 50% 1vh, transparent 90%, #000), linear-gradient(0deg, #000, #000);
          mask-image: radial-gradient(ellipse 0.8vh 2vh at 50% 1vh, transparent 90%, #000), linear-gradient(0deg, #000, #000);
  -webkit-mask-position: 0 -3vh, 0 0;
          mask-position: 0 -3vh, 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation-duration: 7s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.toy-container .game .rings .ring:nth-child(1) {
  animation-delay: 722ms;
  animation-name: ring-1;
}
.toy-container .game .rings .ring:nth-child(2) {
  animation-delay: 1211ms;
  animation-name: ring-2;
}
.toy-container .game .rings .ring:nth-child(3) {
  animation-delay: 934ms;
  animation-name: ring-3;
}
.toy-container .game .rings .ring:nth-child(4) {
  animation-delay: 1136ms;
  animation-name: ring-4;
}
.toy-container .game .rings .ring:nth-child(5) {
  animation-delay: 1065ms;
  animation-name: ring-5;
}
.toy-container .game .rings .ring:nth-child(6) {
  animation-delay: 1640ms;
  animation-name: ring-6;
}
.toy-container .game .rings .ring:nth-child(7) {
  animation-delay: 1673ms;
  animation-name: ring-7;
}
.toy-container .game .rings .ring:nth-child(8) {
  animation-delay: 503ms;
  animation-name: ring-8;
}
.toy-container .game .rings .ring:nth-child(9) {
  animation-delay: 240ms;
  animation-name: ring-9;
}
.toy-container .game .rings .ring:nth-child(10) {
  animation-delay: 532ms;
  animation-name: ring-10;
}
.toy-container .game .glass {
  z-index: 1;
  position: absolute;
  inset: 0;
  background-color: rgba(100, 100, 255, 0.05);
  box-shadow: inset 0.25vh -2vh 4vh rgba(255, 255, 255, 0.5), inset 0 0 0.5vh rgba(255, 255, 255, 0.5);
}
.toy-container .base {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: unset;
  height: 22vh;
  background: rgb(140, 20, 20);
  border-radius: 0.5vh;
  background-image: radial-gradient(ellipse 30vh 3vh at -2vh 50%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.5), inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 -0.2vh 3vh rgba(0, 0, 0, 0.25);
  transform: rotateX(5deg);
  transform-origin: 50% 0;
}
.toy-container .base::before, .toy-container .base::after {
  position: absolute;
  content: "";
  background-color: rgb(140, 20, 20);
}
.toy-container .base::before {
  top: -3vh;
  left: 2vh;
  right: 2vh;
  height: 3vh;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 5%, rgba(255, 255, 255, 0.1) 11%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 80%, rgba(0, 0, 0, 0.6) 97%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: inset 0.1vh 0.2vh 0 rgba(255, 255, 255, 0.2), inset 0 -0.1vh 0 rgba(0, 0, 0, 0.25), 0 0.2vh 3vh rgba(0, 0, 0, 0.25);
}
.toy-container .base::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 4vh;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0.2vh 0.2vh 0.5vh rgba(255, 255, 255, 0.25);
}
.toy-container .base .label {
  position: absolute;
  top: 3vh;
  left: 3vh;
  width: 24vh;
  height: 7vh;
  background: #999;
  border-radius: 0.5vh;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 80%);
  box-shadow: 0.1vh 0.1vh 0.2vh rgba(0, 0, 0, 0.3);
}
.toy-container .base .label::before {
  content: "";
  position: absolute;
  inset: 0.8vh;
  border: 1vh solid #020202;
  border-radius: 0.5vh;
}
.toy-container .base .button {
  position: absolute;
  bottom: 4vh;
  right: 2vh;
  width: 14vh;
  height: 14vh;
  background: rgb(140, 20, 20);
  border-radius: 50%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0.2vh 0.2vh 0.5vh rgba(255, 255, 255, 0.5);
  border-radius: 50% 50% 0 0;
}
.toy-container .base .button::before {
  content: "";
  position: absolute;
  top: 3.5vh;
  left: 3.5vh;
  width: 7vh;
  height: 7vh;
  background: #999;
  border-radius: 50%;
  box-shadow: inset 0.1vh 0.5vh 0 rgba(255, 255, 255, 0.5), inset 0vh -0.5vh 0 rgba(0, 0, 0, 0.5), inset 1vh 0.5vh 2vh rgba(0, 0, 0, 0.25);
}

@keyframes ring-1 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 56.368939382vh;
    left: 7.2549791754vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 46.7551997468vh;
    left: 23.1167362149vh;
    transform: rotateX(66.545099128deg);
  }
  60% {
    bottom: 30vh;
    left: 21.7320480511vh;
    transform: rotateX(269.301607231deg);
  }
  90% {
    bottom: 8vh;
    left: 3.3323865112vh;
    transform: rotateX(70.0094688817deg);
  }
  100% {
    bottom: 5vh;
    left: 13.0013211998vh;
    transform: rotateX(69.6136009457deg);
  }
}
@keyframes ring-2 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 47.7767939474vh;
    left: 24.5797286868vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 49.9050075907vh;
    left: 10.3867651205vh;
    transform: rotateX(146.7175896402deg);
  }
  60% {
    bottom: 30vh;
    left: 8.8310378613vh;
    transform: rotateX(147.9971843255deg);
  }
  90% {
    bottom: 8vh;
    left: 31.1390812726vh;
    transform: rotateX(92.6198847476deg);
  }
  100% {
    bottom: 5vh;
    left: 13.9873123501vh;
    transform: rotateX(73.0731737891deg);
  }
}
@keyframes ring-3 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 55.1702864492vh;
    left: 19.505541471vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 47.5336006784vh;
    left: 27.1954472839vh;
    transform: rotateX(136.5991650557deg);
  }
  60% {
    bottom: 30vh;
    left: 30.7961274024vh;
    transform: rotateX(251.1542126963deg);
  }
  90% {
    bottom: 8vh;
    left: 11.7099369049vh;
    transform: rotateX(92.8652555359deg);
  }
  100% {
    bottom: 5vh;
    left: 19.4655226935vh;
    transform: rotateX(82.2383711602deg);
  }
}
@keyframes ring-4 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 48.2451656866vh;
    left: 11.7361147252vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 46.0768373834vh;
    left: 12.8508150539vh;
    transform: rotateX(124.5669279754deg);
  }
  60% {
    bottom: 30vh;
    left: 13.2075549157vh;
    transform: rotateX(305.4008786072deg);
  }
  90% {
    bottom: 8vh;
    left: 7.802369306vh;
    transform: rotateX(92.4930944701deg);
  }
  100% {
    bottom: 5vh;
    left: 17.3158686005vh;
    transform: rotateX(84.3248045893deg);
  }
}
@keyframes ring-5 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 50.0794342418vh;
    left: 14.9159414768vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 48.1201801999vh;
    left: 26.5710881021vh;
    transform: rotateX(97.5521142144deg);
  }
  60% {
    bottom: 30vh;
    left: 26.6378215253vh;
    transform: rotateX(345.3410592561deg);
  }
  90% {
    bottom: 8vh;
    left: 20.1256060231vh;
    transform: rotateX(92.181615993deg);
  }
  100% {
    bottom: 5vh;
    left: 14.9597600559vh;
    transform: rotateX(81.8399008993deg);
  }
}
@keyframes ring-6 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 48.4871377431vh;
    left: 9.8060904321vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 48.7701748476vh;
    left: 23.6971447117vh;
    transform: rotateX(115.5287979801deg);
  }
  85% {
    bottom: 31vh;
    left: 20.7704184554vh;
    transform: rotateX(57.9073528309deg);
  }
  90% {
    bottom: 29vh;
    left: 18.5vh;
    transform: rotateX(70deg);
    -webkit-mask-position: 0 -3vh, 0 0;
            mask-position: 0 -3vh, 0 0;
  }
  91% {
    bottom: 28.5vh;
    left: 18.5vh;
    transform: rotateX(80deg);
    -webkit-mask-position: 0 0vh, 0 5vh;
            mask-position: 0 0vh, 0 5vh;
  }
  100% {
    bottom: 21.5vh;
    left: 18.5vh;
    transform: rotateX(70deg);
    -webkit-mask-position: 0 0vh, 0 5vh;
            mask-position: 0 0vh, 0 5vh;
  }
}
@keyframes ring-7 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 55.8264549872vh;
    left: 22.0556819666vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 47.8041821276vh;
    left: 14.1754121188vh;
    transform: rotateX(88.607776776deg);
  }
  60% {
    bottom: 30vh;
    left: 10.4158185137vh;
    transform: rotateX(307.0282455154deg);
  }
  90% {
    bottom: 8vh;
    left: 27.9574046184vh;
    transform: rotateX(95.6432726261deg);
  }
  100% {
    bottom: 5vh;
    left: 13.3565329756vh;
    transform: rotateX(71.120988247deg);
  }
}
@keyframes ring-8 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 54.9103859694vh;
    left: 24.3849576358vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 48.7248706438vh;
    left: 37.5782911929vh;
    transform: rotateX(128.4060553877deg);
  }
  60% {
    bottom: 30vh;
    left: 37.2900827626vh;
    transform: rotateX(245.32814534deg);
  }
  90% {
    bottom: 8vh;
    left: 30.2451290083vh;
    transform: rotateX(65.859999206deg);
  }
  100% {
    bottom: 5vh;
    left: 15.7168801798vh;
    transform: rotateX(66.3588004431deg);
  }
}
@keyframes ring-9 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 49.5995462715vh;
    left: 18.9261090419vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 45.2101814537vh;
    left: 18.3829285938vh;
    transform: rotateX(88.6093025556deg);
  }
  85% {
    bottom: 31vh;
    left: 19.371349379vh;
    transform: rotateX(90.6379706775deg);
  }
  90% {
    bottom: 29vh;
    left: 18.5vh;
    transform: rotateX(70deg);
    -webkit-mask-position: 0 -3vh, 0 0;
            mask-position: 0 -3vh, 0 0;
  }
  91% {
    bottom: 28.5vh;
    left: 18.5vh;
    transform: rotateX(80deg);
    -webkit-mask-position: 0 0vh, 0 5vh;
            mask-position: 0 0vh, 0 5vh;
  }
  100% {
    bottom: 21.5vh;
    left: 18.5vh;
    transform: rotateX(70deg);
    -webkit-mask-position: 0 0vh, 0 5vh;
            mask-position: 0 0vh, 0 5vh;
  }
}
@keyframes ring-10 {
  0% {
    bottom: 4vh;
    left: 15vh;
    transform: rotateX(-80deg);
  }
  20% {
    bottom: 56.1345361896vh;
    left: 19.5119335764vh;
    transform: rotateX(470deg);
  }
  35% {
    bottom: 45.7298333258vh;
    left: 19.8220990855vh;
    transform: rotateX(64.5944115344deg);
  }
  60% {
    bottom: 30vh;
    left: 15.3548358129vh;
    transform: rotateX(236.6210284292deg);
  }
  90% {
    bottom: 8vh;
    left: 12.6768993599vh;
    transform: rotateX(65.8092843635deg);
  }
  100% {
    bottom: 5vh;
    left: 18.9394439599vh;
    transform: rotateX(70.205370899deg);
  }
}